<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<script src="${pageContext.request.contextPath}/jquery.bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/text_overflow.js"></script>

</head>


<body class=" theme-blue">
<style type="text/css">
.tiContext {
	white-space:nowrap; 
	height:23px;	
	width:12em;
overflow:hidden; 
}

</style>
	<script type="text/javascript">
		function showTi(e){
			var haha = document.getElementById(e).innerHTML;
			//var haha = e.replace('/n', '<br/>');
			var tContext = document.getElementById("tContext"+e);
			if(tContext.innerText == ""){
				tContext.innerHTML = haha;
			}else{
				tContext.innerHTML = "";
			}
		}

		$(function() {
			$("[data-toggle='popover']").popover();
		});

		$(document).ready(function() {
			 /* var haha = document.getElementById("ti").value; 
			// var haha = document.getElementsByName("ti").innerHTML;
			alert(haha);
			var haha = e.replace('/n', '<br/>');
			alert(haha);  */

			$("#message").delay(1500).slideUp("normal");

			$("#user").click(function() {
				$.confrim({
					title : 'Confirm!',
					content : 'Confirm! Confirm! Confirm!',
					confirm : function() {
						alert('the user clicked confirm');
					},
					cancel : function() {
						alert('the user clicked cancel')
					}
				});
			});

		});

		function isDelete() {
			if (window.confirm("Are you sure delete?"))

				return true;
			else {
				return false;
			}

		}
	</script>

	<div class="content">
		<c:if test="${not empty message}">
			<div id="message" class="alert alert-success">
				<button data-dismiss="alert" class="close">×</button>${message}</div>
		</c:if>


		<div class="header">

			<h1 class="page-title">Tis</h1>
			<ul class="breadcrumb">
				<li><a href="index.html">Home</a></li>
				<li class="active">ti</li>
			</ul>

		</div>
		<div class="main-content">

			<%-- <div class="search-well">
                <form class="form-inline" method="post" style="margin-top:0px;" action="${pageContext.request.contextPath }/tea/search">
                    <input class="input-xlarge form-control" placeholder="Search Help..." id="appendedInputButton" name="searchTip" value="${searchTip }" type="text">
                    <button class="btn btn-default" type="submit"><i class="fa fa-search"></i> Go</button>
                </form>
            </div> --%>

			<div class="btn-toolbar list-toolbar">
				<button class="btn btn-primary">
					<i class="fa fa-plus"></i> <a href="${pageContext.request.contextPath}/ti/add">New Subject</a>
				</button>
				<button class="btn btn-default">
					<a href="${pageContext.request.contextPath }/upload">Import</a>
				</button>
				<button class="btn btn-default">Export</button>
				<div class="btn-group"></div>
			</div>




			<table class="table-striped  table table-bordered ">
				<thead>
					<tr>
						<th id="user"><spring:message code="ti.examSubjectId" /></th>
						<%-- <th><spring:message code="ti.tiId" /></th> --%>
						<th><spring:message code="ti.tiName" /></th>
						<%--   <th><spring:message code="ti.optionA"/></th>
      <th><spring:message code="ti.optionB"/></th>
      <th><spring:message code="ti.optionC"/></th>
      <th><spring:message code="ti.optionD"/></th> --%>
						<th><spring:message code="ti.key" /></th>
						<th><spring:message code="ti.point" /></th>
						<th><spring:message code="ti.difficulty" /></th>
						<th style="width: 3.5em;" colspan="2"><spring:message
								code="website.operator" /></th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${page.datas }" var="ti">
						<tr>
							<td>${ti.examSubjectName }</td>
							<%-- <td>${ti.examTiId }</td> --%>
							<!-- 1111111111111111111111111111111111111 -->
							<td ondblclick="showTi(${ti.examTiId })">
							<div class="tiContext" id="${ti.examTiId }" style="text-overflow:ellipsis">
							    ${ti.examTiName }
								</div>
							</td>
							<%-- <td>${ti.examTiOptiona }</td>
								<td>${ti.examTiOptionb }</td>
								<td>${ti.examTiOptionc }</td>
								<td>${ti.examTiOptiond }</td> --%>
							<td>${ti.examTiKey }</td>
							<td>${ti.examTiPoint }</td>
							<td>${ti.examTiDifficultyName }</td>
							<td><a onclick="return isDelete()"
								href="${pageContext.request.contextPath}/ti/delete/${ti.examTiId }"
								id="del" role="button" data-toggle="modal"> <i
									class="fa fa-trash-o"></i></a> &nbsp;<a
								href="${pageContext.request.contextPath}/ti/edit/${ti.examTiId}"><i
									class="fa fa-pencil"></i></a></td>
						</tr>
						<tr>
							<td colspan="7" style="background-color:#D6D6D6;margin: 0px;padding: 0px;"><div id="tContext${ti.examTiId}" ></div></td>
						</tr>
					</c:forEach>


					<tr>
						<td colspan="11"><jsp:include page="/common/page.jsp">
								<jsp:param value="tiList" name="url" />
								<jsp:param value="${page.totalSize }" name="items" />
								<jsp:param value="${page.pageSize }" name="pageSize" />
							</jsp:include></td>
					</tr>
				</tbody>
			</table>
</body>
</html>
